import "echarts/map/js/province/guangxi.js";

const geoCoordMap = {
    '南宁市': [108.320004, 22.82402],
    '柳州市': [109.411703, 24.314617], 
    '桂林市': [110.299121, 25.274215], 
    '梧州市': [111.297604, 23.474803], 
    '北海市': [109.119254, 21.473343], 
    '防城港市': [108.345478, 21.614631], 
    '钦州市': [108.624175, 21.967127], 
    '贵港市': [109.602146, 23.0936], 
    '玉林市': [110.154393, 22.63136], 
    '百色市': [106.616285, 23.897742], 
    '贺州市': [111.552056, 24.414141],
    '河池市': [108.062105, 24.695899], 
    '来宾市': [109.229772, 23.733766], 
    '崇左市': [107.353926, 22.404108],
}

const convertData = (data) => {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat((data[i].value + 1))
            });
        }
    }
    return res;
};


export const configure = (datasource, name, region) => {
    const data = datasource.sort((a, b) => b.value - a.value);
    const average = data.find(item => item.name == '全区').value
    console.log(average)
    const min = data[0].value;
    const max = data[data.length - 1].value;

    return {
        backgroundColor: "transparent",
        tooltip: {
            show: false,
            textStyle: {
                color: "#36B2F8",
            },
            // formatter(params) {
            // },
        },
        // grid: {
        //   top: "5%",
        //   left: "3%",
        //   right: "3%",
        //   bottom: "8%",
        // },
        visualMap: {
            type: 'piecewise',
            // show: true,
            show: false,
            min,
            max,
            bottom: "5%",
            left: "2%",
            itemWidth: 10,
            text: ['高', '低'],
            realtime: false,
            calculable: false,
            borderRadius: 4,
            // inRange: {
            //     color: ["#25298B", "#3B2389", "#581A7B", "rgb(244, 51, 93)"],
            // },
            pieces: [
                { min: 1, color: 'yellow' },
                { min: average, max: 1, color: '#4f953d' },
                { min: 0, max: average, color: '#f9a11b' },
                { max: .0, color: '#ff7761' },
            ],
            textStyle: {
                color: "#08E5F3"
            }
        },
        geo: {
            // show: true,//false,
            map: '广西',
            center: [108.3584206, 23.61839424],
            label: {
                show: false,
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: 'transparent',
                    borderColor: '#3B5077'
                },
                emphasis: {
                    areaColor: '#e5ecff'
                }
            },
            zoom: 1.15
        },
        series: [
            {
                name: 'effectScatter',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                encode: {
                    value: 2
                },
                symbolSize: function (val) {
                    const dif = val[2] > 1 ? val[2] - 1 : 1 - val[2]
                    return dif > 0.02 ? dif * 200 : 4;
                },
                // showEffectOn: 'emphasis',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    formatter: '{b}',
                    position: 'inside',
                    color: '#fff',
                    fontWeight: 'bold',
                    show: true,
                },
                itemStyle: {
                    shadowBlur: 50,
                    shadowColor: 'green'
                },
            },
            {
                name,
                type: "map",
                // show: false,
                mapType: region,
                center: [108.3584206, 23.61839424],
                roam: false,
                // hoverAnimation: true,
                itemStyle: {
                    normal: {
                        borderColor: "#08E5F3",
                        fontWeight: 700,
                        borderWidth: 2,
                    },
                    emphasis: {
                        areaColor: '#61a0a8'
                    }
                },
                label: {
                    show: false,
                },
                data,
                zoom: 1.15,
            },
        ],
    };
}